<script setup>
import { io } from "socket.io-client";
import {onMounted, ref } from "vue" 


const localVideo = ref(null)

const socket = io('http://localhost:3000')

const isCall = ref(false)

const getLocalStream = async ()=>{
    try{
    const stream = await navigator.mediaDevices.getUserMedia(
        {
            audio: true,video:true
        }
    )

    if (localVideo.value) {
      localVideo.value.srcObject = stream;
    }

    return stream
    } catch(e){
        console.error(e)
    }
}

socket.on("connect",()=>{
    console.log("客户端连接成功")
})

const send = () =>{
    socket.emit("msg","hello")
}

onMounted(()=>{
    // getLocalStream()
    socket.connect()
})

const toCall = ()=>{
    isCall.value = true
}

const canelCall = ()=> isCall.value = false

</script>

<template>
    <div>
<button @click="toCall" v-if="!isCall">发起视频</button>
<div v-else>
    <button @click="canelCall">取消</button>
</div>

<button @click="send">send</button> 

<video ref="localVideo" autoplay playsinline></video>
    </div>
</template>

<style scoped>
video {
  width: 100%;
}
</style>